<template>
	<view>
		<view class="viewTasks" @click.stop="bindClose" :style="{ display: show ? 'flex' : 'none' }"
			@touchmove.stop.prevent="doNothing">
			<view style="width: 100%;" class="main" @click.stop="clickstop">
				<view class="down" @click="bindClose">
					<view class="down-btn"></view>
				</view>
				<view style="padding: 0 40rpx;">
					<view class="titleText">查看任务</view>
					<view style="color: #666;font-size: 24rpx;">截止至
						<text style="color: #0091FF;">{{ endTime + " 24:00" }}前</text>未完成的应作业保养任务:
					</view>
					<view class="totle">共<text style="color: #0091FF;">{{ total }}</text>个</view>
				</view>
				<view class="records">
					<scroll-view scroll-y="true" style="height:900rpx;width: 100%;" @scrolltolower="scrolltolower">
						<view class="records-item" v-for="(item, index) in list" :key="item.planId">
							<view class="records-item-head">
								<view class="buildding" @click="toBuilddingDetail(item)">
									<image src="/static/images/index/build.svg	" mode=""></image>
									<view class="">
										{{ item.buildingName }}
										<uni-icons color="#999999" type="forward"></uni-icons>
									</view>
								</view>
								<view class="status">
									<image :src="statusBy[item.status].icon"></image>
									<view :style="{ color: statusBy[item.status].color }">{{ item.statusDesc }}</view>
								</view>
							</view>

							<view class="records-item-content" @click.stop="toDetail(item)">
								<view class="left">
									<view class="name">{{ item.elevatorAddress }}</view>
									<view class="tags">
										<view class="lable">保养：</view>
										<view class="tag" v-for="tag in item.templateNames" :key="tag">{{ tag }}</view>
									</view>
									<view class="labs">
										<view class="lab" v-if="item.overdueName && item.overdueName.indexOf('逾期') != -1">
											{{ item.overdueName }}
										</view>
										<view class="lab" style="background: #fdf1e9;color: #fa6400;"
											v-if="item.timeliness && item.timeliness.indexOf('超时') != -1">
											{{
												item.timeliness
											}}</view>
										<view class="lab" v-if="item.isDeferred === 1">延期保养</view>
									</view>
								</view>
								<view class="right" v-if="item.planContentUserVos.length <= 2">
									<view v-for="(user, uIdx) in item.planContentUserVos.slice(0, 2)" :key="uIdx"
										:class="['menber']"
										:style="{ background: !user.signInfo.isPlanStatus ? '#b9b9b9' : userinfo.nick_name === user.signUser.userName ? '#0091ff' : '#00C6C0' }">
										{{ user.userName.length > 2 ? user.userName.slice(-2) : user.userName }}
									</view>
								</view>
								<zb-tooltip @handchange="handchange($event, index)" :items="item" @click.stop v-else
									placement="bottom" background="#fff" :right="26" color="#333" :showIcon="false">
									<view class="right">
										<view v-for="(user, uIdx) in item.planContentUserVos.slice(0, 2)" :key="uIdx"
											:class="['menber']"
											:style="{ background: !user.signInfo.isPlanStatus ? '#b9b9b9' : userinfo.nick_name === user.signUser.userName ? '#0091ff' : '#00C6C0' }">
											{{ user.userName.length > 2 ? user.userName.slice(-2) : user.userName }}
										</view>
										<image v-if="item.planContentUserVos.length > 2"
											:style="item.usermore ? 'transform: rotate(180deg);' : ''"
											src="/static/images/down.png" mode=""></image>
									</view>
									<view class="userlist" slot="content">
										<view v-for="(user, uIdx) in item.planContentUserVos" :key="uIdx"
											class="userlist-item">
											<view :class="['menber']"
												:style="{ background: !user.signInfo.isPlanStatus ? '#b9b9b9' : userinfo.nick_name === user.signUser.userName ? '#0091ff' : '#00C6C0' }">
												{{ user.userName.length > 2 ? user.userName.slice(-2) : user.userName }}
											</view>
											<view class="userlist-item-name"
												:style="!user.signInfo.isPlanStatus ? 'color: #999999;' : 'color: #333'">
												{{ user.userName }}
											</view>
										</view>
									</view>
								</zb-tooltip>
							</view>
							<view class="records-item-bottom">
								<view class="">计划时间：{{ item.planDate.split(' ')[0] }}</view>
								<view class="" v-if="item.scoreStatus == 1">工单评分：{{ item.score || 0 }}分</view>
							</view>
						</view>
						<view class="more" v-if="list.length >= total">- 已经到底了 -</view>
						<view class="more" v-else>上拉加载更多</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	list
} from '@/apis/viewTasks.js';
import {
	mapState
} from 'vuex';
export default {
	name: 'viewTasks',
	data() {
		return {
			current: 1,
			total: 0,
			list: [], // 列表数据
			statusBy: {
				// 保养状态列表
				1: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				2: {
					text: '进行中',
					color: '#0091ff',
					icon: '/static/images/index/2.png'
				},
				3: {
					text: '已提交',
					color: '#F7B500',
					icon: '/static/images/index/3.png'
				},
				4: {
					text: '签字完成',
					color: '#333',
					icon: '/static/images/index/s4d.png'
				}
			},
		};
	},
	props: {
		show: {
			type: Boolean,
			default: true
		},
		endTime: {
			type: String,
			default: ''
		},
		userIds: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	watch: {
		endTime(val) {
			if (val) {
				this.current = 1;
				this.list = [];
				this.getList();
			}
		},
		userIds(val) {
			if (val) {
				this.current = 1;
				this.list = [];
				this.getList();
			}
		}
	},
	computed: {
		...mapState('user', ['userinfo']),
	},
	methods: {
		toBuilddingDetail(item) {
			console.log(item);
			uni.navigateTo({
				url: '/pageModules/projectInfo/detail?id=' + item.buildingId,
			});
		},
		// 获取列表
		getList() {
			uni.showLoading();
			let data = {
				startTime: '2022-05-01',
				endTime: this.endTime,
				size: 5,
				current: this.current,
				userIds: this.userIds.join(','),
				planStatus: '1,2,3,5'
			};
			list(data).then(res => {
				const records = res.data.records || [];
				for (var i = 0; i < records.length; i++) {
					records[i].usermore = false;
					if (records[i].partsName) {
						const parts = records[i].partsName.split('&amp;&amp;');
						records[i].parts = parts[parts.length - 1];
					}
					if (records[i].planContentUserVos) {
						records[i].planContentUserVos = records[i].planContentUserVos.sort(this.userSort);
					}
				}
				this.current++;
				this.total = res.data.total;
				this.list.push(...records);
				uni.hideLoading();
			}).catch(err => {
				uni.hideLoading();
			});
		},
		handchange(val, index) {
			this.list[index].usermore = val;
		},
		scrolltolower() {
			if (this.list.length >= this.total) {
				return;
			}
			this.getList();
		},
		// 前往详情页
		toDetail(item) {
			if (item.typeStatus == 1) {
				// 保养详情
				uni.navigateTo({
					url: `/subpages/workOrders/detail?planId=${item.planId}&elevatorId=${item.elevatorId}`
				});
			}
		},
		bindClose() {
			this.$emit('closed', 1);
		},
		doNothing() { },
		clickstop() { },
	}
};
</script>

<style lang="scss" scoped>
.viewTasks {
	width: 100%;
	height: 100%;
	background-color: $uni-bg-color-mask;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 300;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: flex-end;
	animation: fadeInOut 0.3s ease;
	box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
	overflow-y: scroll;

	.main {
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// right: 0;
		background-color: #FFFFFF;
		border-radius: 8rpx 8rpx 0rpx 0rpx;

		.down {
			width: 100%;
			padding: 20rpx 0;

			.down-btn {
				width: 64rpx;
				height: 10rpx;
				background: #d8d8d8;
				border-radius: 6rpx;
				margin: 0 auto;
			}
		}

		.titleText {
			color: #333;
			font-size: 32rpx;
			font-weight: bold;
		}

		.totle {
			color: #666;
			font-size: 28rpx;
			margin-top: 20rpx;
		}
	}

	.records {
		width: 100%;
		height: 100%;
		color: #333;

		&-item {
			width: calc(100% - 40rpx);
			margin: 20rpx;
			background-color: #fff;
			border-radius: 8rpx;
			box-shadow: 0px 1px 6px 0px rgba(177, 177, 177, 0.50);

			&-head {
				display: flex;
				color: #333333;
				font-size: 26rpx;
				justify-content: space-between;
				// align-items: center;
				align-items: baseline;
				border-bottom: 2rpx solid #eeeeee;
				padding: 20rpx;

				.buildding {
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					flex: 1;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 7rpx;
						padding-top: 5rpx;
					}

					view {
						flex: 1;
						line-height: 38rpx;
					}
				}

				.status {
					display: flex;
					justify-content: flex-end;
					align-items: flex-start;
					width: 200rpx;

					image {
						width: 32rpx;
						padding-top: 3rpx;
						height: 32rpx;
						margin-right: 7rpx;
					}
				}
			}

			&-content {
				padding: 24rpx 20rpx;
				display: flex;
				align-items: center;
				padding-bottom: 12rpx;

				.left {
					flex: 1;

					.name {
						font-size: 32rpx;
						font-weight: bold;
					}

					.tags {
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;
						align-items: baseline;
						font-size: 26rpx;
						color: #666;
						margin: 16rpx 0;

						.tag {
							border: 2rpx solid #cccccc;
							border-radius: 20rpx;
							font-size: 24rpx;
							padding: 0rpx 13rpx;
							margin: 8rpx 0;
							margin-right: 12rpx;
						}
					}

					.labs {
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;
						align-items: baseline;

						.lab {
							font-size: 24rpx;
							color: #e02020;
							background: #ffe3e3;
							padding: 0rpx 13rpx;
							border-radius: 4rpx;
							margin: 8rpx 0;
							margin-right: 8rpx;
						}

						.blue {
							color: #0091ff;
							background: #dcf0ff;
						}
					}
				}

				.right {
					display: flex;
					align-items: center;
					width: 170rpx;
					justify-content: flex-end;
					flex-wrap: wrap;

					.menber {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						background-color: #0091ff;
						color: #fff;
						margin-left: 4rpx;
					}

					image {
						width: 25rpx;
						height: 25rpx;
						margin-left: 5rpx;
						transition: 0.3s all;
					}
				}

				.userlist {
					&-item {
						display: flex;
						align-items: center;
						width: 180rpx;
						margin-bottom: 17rpx;

						.menber {
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 20rpx;
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							background-color: #0091ff;
							color: #fff;
							margin-left: 4rpx;
							margin-right: 14rpx;
						}

						&-name {
							font-size: 24rpx;
							color: #333;
							overflow: hidden;
							flex: 1;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					&-item:last-child {
						margin-bottom: 0;
					}
				}
			}

			&-bottom {
				padding: 20rpx;
				border-top: 2rpx solid #eeeeee;
				color: #999999;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}

	.more {
		width: 100%;
		padding: 30rpx 0;
		text-align: center;
		color: #999999;
		font-size: 24rpx;
	}

	@keyframes fadeInOut {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
}
</style>
